<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
    <div id="div">
 
       <!-- 
        vue 生命周期
        1.创建阶段: 数据代理   创建前：beforeCreate  创建后: created
        2.挂载阶段: 将模板渲染到页面 （将模板渲染成html页面） beforeMounted() mounted()
        3.更新阶段：有状态更新会触发 (触发多次)  beUpdate updated
        4.销毁阶段：app销毁 beDestroy destroyed

        每一个生命周期，都有两个钩子函数
        -->
        <ul>
            <li v-for="item in arr">{{item.name}}</li>
        </ul>
        
        
        <!-- <input type="text" v-model="msg"> -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const msg2 =''
        const app = Vue.createApp({
            data: function () {
                return {
                    msg: 'hello vue',
                    msg1:'',
                    arr:[]
                }
            },
            methods: {
                onInput(e) {
                    console.log(e);
                    this.msg = e.target.value;
                }
            },
            //做接口数据的获取
            created() {
                $.ajax({
                    url:'http://www.zdtech.top:3000/v1/solars',
                    type:'get',
                    error:()=>{
                        console.log('请求失败');
                    },
                    success:(obj)=>{
                      if(obj.code=='200'){
                        this.arr = obj.data
                      }
                      console.log(this.arr)
                    }
                });
            },
            // 没啥用，
            beforeCreate() {
                // console.log('创建前',this.msg)
            },
            mounted() {
                //挂载后:获取节点树
                console.log(this.$el);
            },
          
        }).mount('#div');
        
    </script>

</body>

</html>